<template>
  <div>
    <h3 @click="getOperationLog">{{ $t("log.title") }}</h3>
    <div class="search">
      <el-input
        class="input-with-select"
        :placeholder="$t('log.search.placeholder')"
        v-model="queryInfo.query_text"
      >
        <el-select
          v-model="queryInfo.query_type"
          slot="prepend"
          style="width: 140px"
        >
          <el-option
            v-for="item in $t('log.options')"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>

        <i slot="prefix" class="el-input__icon el-icon-search"></i>
      </el-input>
      <el-button type="primary" @click="searchTask">{{
        $t("log.search.searchBtn")
      }}</el-button>
      <el-button type="info" plain @click="resetSearch">{{
        $t("log.search.resetBtn")
      }}</el-button>
    </div>
    <el-table
      v-loading="loading"
      element-loading-text="Loading..."
      :data="operationLogList"
      stripe
      height="680px"
      ref="logTableRef"
    >
      <el-table-column
        type="index"
        :label="$t('log.table.index')"
        width="61"
      ></el-table-column>
      <el-table-column prop="user" :label="$t('log.table.account')" width="180">
      </el-table-column>
      <el-table-column
        prop="create_time"
        show-overflow-tooltip
        :label="$t('log.table.time')"
      >
      </el-table-column>
      <el-table-column prop="login_ip" :label="$t('log.table.ip')">
      </el-table-column>
      <el-table-column prop="remark" :label="$t('log.table.operation')">
      </el-table-column>
    </el-table>
    <div class="footer">
      <el-pagination
        class="pagination"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.page"
        :page-size="queryInfo.pagesize"
        layout="total, prev, pager, next, jumper"
        :total="tableCount"
      >
      </el-pagination>
    </div>
    <!-- :page-sizes="[2, 4, 6, 8]"
      :page-size="queryInfo.pagesize" -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 获取操作日志的参数对象
      queryInfo: {
        // 当前的页数
        page: 1,
        // 当前每页显示多少条数据
        pagesize: 13,
        query_text: "",
        query_type: 1,
      },
      tableData: [],
      tableCount: 0,
      operationLogList: [],
      value: "",
      loading: false,
    };
  },
  created() {
    this.getOperationLog();
  },
  methods: {
    // 分页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.queryInfo.page = val;
      this.getOperationLog();
    },
    // 获取操作日志列表
    getOperationLog() {
      this.loading = true;
      this.$http
        .get("/business/operationLog/list", { params: this.queryInfo })
        .then((res) => {
          console.log(res.data);
          this.loading = false;
          this.tableCount = res.data.total;
          this.operationLogList = res.data.data;
        });
    },
    // 搜索
    searchTask() {
      this.getOperationLog();
    },
    // 重置
    resetSearch() {
      this.queryInfo.query_text = "";
      this.queryInfo.query_type = 1;
      this.getOperationLog();
    },
  },
};
</script>

<style lang="less" scoped>
h3 {
  color: #606266;
}
.search {
  margin: 10px 0;
  .el-input {
    width: 34%;
  }
  .el-button {
    margin-left: 10px;
  }
}
.footer {
  display: flex;
  padding-top: 12px;
  .pagination {
    margin-left: 20px;
  }
}
</style>